<script setup>
const props = defineProps({
    toasts: {
        type: Object,
        default: []
    },
    delToast: {
        type: Function
    }
});
</script>

<template>
    <div class="fixed right-2 top-2">

        <transition-group enter-active-class="animate__animated animate__fadeInRight animate__faster"
            leave-active-class="animate__animated animate__fadeOutRight animate__faster" tag="div"
            class="grid grid-cols-1 gap-y-2">
            <div v-for="(item, index) in toasts" :key="item.uuid" :index="index" class="leading-8"
                :isSetAutoDel="item.isSetAutoDel">

                <div class="flex space-x-4 rounded-md py-1 px-2" :style="item.tipsContentStyle">
                    <span class="flex items-center">
                        <i :class="`${item.iClass} text-white w-6 h-6 leading-6 bg-white rounded-full text-center`"
                            :style="item.iStyle"></i>
                    </span>
                    <span class="text-white text-sm flex items-center">{{ item.text }}</span>
                    <span class="text-white cursor-pointer" @click="delToast(item.uuid)"><i class="fas fa-times"></i></span>
                </div>
            </div>
        </transition-group>

    </div>
</template>

<style scoped>
.list-complete {
    display: flex;
    flex-direction: column;
}

.list-complete-item {
    width: 180px;
    transition: all 1s;
    /*display: inline-block;*/
    margin-top: 10px;

}

.list-complete-enter,
.list-complete-leave-to {
    opacity: 0;
    transform: translateX(100%);
}

.list-complete-move {}

.list-complete-leave-active {
    position: absolute;
}
</style>

